<template>
    <!-- 积分账目 -->
    <div class="view_point_account">
        <card title="积分流水账单">
            <template #actions>
                <el-date-picker
                    class="w-36"
                    v-model="queryAccountDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                />
                <el-select class="w-28" v-model="queryAccountType" clearable>
                    <el-option v-for="(val, key) in accountTypes" :key="val" :value="key" :label="val" />
                </el-select>
                <el-select class="w-28" v-model="queryByWhat">
                    <el-option v-for="(val, key) in queryBySomething" :key="key" :value="key" :label="val" />
                </el-select>
                <el-input
                    class="w-48"
                    prefix-icon="el-icon-search"
                    v-model="queryString"
                    :placeholder="placeholder"
                    clearable
                />
            </template>
            <template #default>
                <el-table :data="tableData">
                    <el-table-column type="index" label="#" align="center" />
                    <el-table-column prop="nickName" label="会员账号" />
                    <el-table-column prop="sn" label="单号" />
                    <el-table-column prop="before" label="之前金额" :formatter="amountFormatter" />
                    <el-table-column prop="amount" label="金额/元" :formatter="amountFormatter" />
                    <el-table-column prop="lockKey" label="加密数量" />
                    <el-table-column label="类型">
                        <template #default="{ row: { accType } }">
                            {{ accountTypes[accType] }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" />
                </el-table>
            </template>
            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';
import { formatAmount } from '../../functions';

export default {
    data() {
        return {
            tableData: [],

            queryByWhat: 'nickName',
            queryAccountDate: '',
            queryAccountType: '',

            amountFormatter(row, column, cellValue) {
                return formatAmount(cellValue);
            },
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/ums/findIntegralJournal',
            paginable: true,
            params: {
                queryString: 'queryByWhat',
                queryAccountDate: 'createTime',
                queryAccountType: 'accType',
            },
        }),
    ],

    computed: {
        // 文本框占位符
        placeholder() {
            return `按${this.queryBySomething[this.queryByWhat]}查询`;
        },

        // 按某物查询
        queryBySomething() {
            return {
                nickName: '会员账号',
                sn: '单号',
            };
        },

        // 积分订单类型
        accountTypes() {
            return {
                1: '收入',
                2: '支出',
            };
        },
    },

    watch: {
        queryAccountDate: 'query',
        queryAccountType: 'query',
    },
};
</script>